<template>
	<view>
		<view class="margin-top">
			<uni-forms ref="secondValiForm" :rules="rules" :modelValue="formData" label-position="top">
				<uni-forms-item v-for="(responderItem, index) in responderList" :key="index" :name="responderItem.name" :label-width="90">
					<template #label>
						<view class="flex align-center padding-sm" :class="responderItem.name == 'firstResponderDO' || responderItem.name == 'secondResponderDO' ? 'required' : ''">
							<view class="text-black" style="width: max-content;">{{ responderItem.label }}</view>
						</view>
					</template>
					<view class="flex justify-end bg-white padding">
						<select-action-sheet v-model="formData[responderItem.name]" :api="thingResponderPage" title="选择接警人" placeholder="请选择接警人" searchPlaceholder="请输入接警人名称">
							<template #label="{ selectItems }">
								<view class="flex justify-between response padding-lr" v-if="selectItems.length">
									<view>{{ selectItems.map((selectItem) => selectItem.name).join(',') }}</view>
									<view>{{ selectItems.map((selectItem) => selectItem.phone).join(',') }}</view>
								</view>
							</template>
							<template #item="{ item }">
								<view class="">
									<view>
										<text class="text-xl text-bold">{{ item.name }}  </text> {{ item.phone }}
									</view>
									<view class="margin-top-xs text-gray">
										{{ item.deptName }}
									</view>
								</view>
							</template>
						</select-action-sheet>
					</view>
				</uni-forms-item>
			</uni-forms>
		</view>

		<view style="height: 142upx;"></view>
		<view class="padding bg-white fixed-bottom">
			<button type="primary" @click="submit">保存</button>
		</view>

	</view>
</template>

<script>
	import { getBuilding, updateBuilding } from "@/api/building/index"
	import { thingResponderPage } from "@/api/police/index"
	export default {
		data() {
			return {
				thingResponderPage: thingResponderPage,
				formData: {},
				// 校验规则
				rules: {
					firstResponderDO: {
						rules: [{
							required: true,
							errorMessage: '一级接警人不能为空'
						}]
					},
					secondResponderDO: {
						rules: [{
							required: true,
							errorMessage: '二级接警人不能为空'
						}]
					}
				},
				responderList: [
					{
						label: '一级接警人',
						name: 'firstResponderDO'
					},
					{
						label: '二级接警人',
						name: 'secondResponderDO'
					},
					{
						label: '三级接警人',
						name: 'thirdResponderDO'
					},
					{
						label: '四级接警人',
						name: 'fourthResponderDO'
					}
				]
			}
		},
		onLoad(e) {
			if(e.id) {
				getBuilding(e.id).then(response => {
				  this.formData = {
					...response.data,
				  }
				})
			}
		},
		methods: {
			submit() {
				// 在 onLoad 生命周期中，formData添加了一个 id 字段 ，此时这个字段是不参数校验的，所以结果中不返回
				// 在 validate(['id']) 方法中，指定第一个参数 ，即可返回id字段
				this.$refs.secondValiForm.validate(
                    ['id','buildingName','deptId','buildingType','province','city','area','street','coordinate','address'],
                    (err,formData)=>{
					if(!err){
                        const input = {
                            ...formData,
                            firstResponderId: formData.firstResponderDO?.id || null,
                            secondResponderId: formData.secondResponderDO?.id || null,
                            thirdResponderId: formData.thirdResponderDO?.id || null,
                            fourthResponderId: formData.fourthResponderDO?.id || null,
                        }
                        uni.showLoading({
                            title: input.id ? "更新中..." : "创建中...",
                        })
                        updateBuilding(input).then(res=> {
                            uni.$emit('buildingListReload',true)
                            uni.navigateBack()
                        }).finally(()=>{
                            uni.hideLoading()
                        })
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.fixed-bottom {
		position: fixed;
		bottom: 0;
		width: 100%;
	}
</style>
